<template>
    <n-card :bordered="false" content-style="padding: 0">
        <n-card :bordered="false" content-style="padding: 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-form-item label="账号" label-placement="left" :show-feedback="false">
                    <n-input v-model:value="form.username" size="small" />
                </n-form-item>
            </n-space>
            <n-space>
                <n-button @click="handleSelectOnClick" size="small" type="info">查询</n-button>
            </n-space>
        </n-card>
        <n-card :bordered="false" content-style="padding: 10px 0; display: flex; justify-content: space-between;">
            <n-space>
                <n-button @click="handleInsertOnClick" size="small" type="info">新增</n-button>
            </n-space>
            <n-space>
                <n-tooltip placement="bottom">
                    <template #trigger>
                        <n-icon size="22">
                            <SettingsIcon/>
                        </n-icon>
                    </template>
                    列设置
                </n-tooltip>
            </n-space>
        </n-card>
        <n-data-table
            table-layout="fixed"
            :bordered="false"
            :loading="loading"
            :columns="columns"
            :data="records"
            :pagination="pagination"
            remote
        />
        <UserModal
            :show="ModalData.show"
            :title="ModalData.title"
            :row="ModalData.row"
            @handleSelectOnClick="handleSelectOnClick"
            @handleCloseOnClick="handleCloseOnClick"
        />
        <AllocateRoleModal
            :show="AllocateRoleModalData.show"
            :row="AllocateRoleModalData.row"
            @handleSelectOnClick="handleSelectOnClick"
            @handleCloseOnClick="handleAllocateRoleCloseOnClick"
        />
    </n-card>
</template>
<script lang="ts" setup>
import {h, reactive, onMounted, toRefs, computed, ComputedRef} from 'vue'
import { NSpace, NButton, NDropdown, DataTableColumn, PaginationInfo } from 'naive-ui'
import { getUserPage, deleteUser, resetPassword } from '@/api/base/user'
import { IMessage, IConfirmMessage } from '@/utils/message'
import { Settings as SettingsIcon } from '@vicons/carbon'
import { usePagination } from '@/hooks/usePagination'
import { basicColumns } from './columns'
import UserModal from './modal/UserModal.vue'
import AllocateRoleModal from './modal/AllocateRoleModal.vue'

const state = reactive({
    loading: false,
    pagination: usePagination(handleSelectOnClick),
    form: {} as BaseUser,
    records: [] as Array<BaseUserVO>,
    ModalData: {
        show: false,
        title: '',
        row: {} as BaseUser
    },
    AllocateRoleModalData: {
        show: false,
        row: {} as BaseUser
    }
})

const {
    loading,
    form,
    records,
    pagination,
    ModalData,
    AllocateRoleModalData
} = toRefs(state)

const columns: ComputedRef<Array<DataTableColumn<BaseUserVO>>> = computed(() => (
    [
        ...basicColumns,
        {
            key: 'action',
            title: '操作',
            width: 200,
            render(row) {
                return h(
                    NSpace,
                    () => [
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                onClick: () => handleUpdateOnClick(row)
                            },
                            {default: () => '修改'}
                        ),
                        h(
                            NButton,
                            {
                                size: 'tiny',
                                onClick: () => handleDeleteOnClick(row)
                            },
                            {default: () => '删除'}
                        ),
                        h(
                            NDropdown,
                            {
                                onSelect: (key: string) => { onSelect(key, row) },
                                options: [
                                    {
                                        key: 'allocateRole',
                                        label: '分配角色'
                                    },
                                    {
                                        key: 'resetPassword',
                                        label: '重置密码'
                                    }
                                ]
                            },
                            {default: () => {
                                    return h(
                                        NButton,
                                        {
                                            size: 'tiny'
                                        },
                                        {default: () => '更多操作'}
                                    )
                                }
                            }
                        )
                    ]
                )
            }
        }
    ]
))

const onSelect = (key: string, row: BaseUser) => {
    if('allocateRole' === key){
        handleAllocateRole(row)
    }else if('resetPassword' === key){
        handleResetPassword(row)
    }
}

const handleResetPassword = (row: BaseUser) => {
    IConfirmMessage({
        content: '确定重置密码？',
        onSuccess: async () => {
            const { message } = await resetPassword(row.id)
            IMessage({ content: message })
        }
    })
}

const handleAllocateRole = (row: BaseUser) => {
    state.AllocateRoleModalData.show = true
    state.AllocateRoleModalData.row = row
}

onMounted(() => {
    handleSelectOnClick()
})

async function handleSelectOnClick(){
    state.loading = true
    const { data } = await getUserPage(state.pagination, state.form)
    state.records = data.records
    state.pagination.pageCount = data.pages
    state.pagination.prefix = () => `总共${data.total}条`
    state.loading = false
}

const handleInsertOnClick = () => {
    state.ModalData.row = {} as BaseUser
    state.ModalData.show = true
    state.ModalData.title = '新增'
}

const handleUpdateOnClick = (row: BaseUser) =>{
    state.ModalData.row = row
    state.ModalData.show = true
    state.ModalData.title = '修改'
}

const handleDeleteOnClick = (row: BaseUser) => {
    IConfirmMessage({
        content: '确认删除？',
        onSuccess: async () => {
            const{ message } = await deleteUser(row.id)
            handleSelectOnClick()
            IMessage({content: message})
        }
    })
}

const handleCloseOnClick = () => {
    state.ModalData.show = false
}

const handleAllocateRoleCloseOnClick = () => {
    state.AllocateRoleModalData.show = false
}

</script>
